<template>
  <el-dialog title="试题预览" :visible.sync="dialogShow" width="1000px">
    <el-divider content-position="center">基本信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="10"
        ><div>试题编号:{{ questionInfo.quest_num }}</div></el-col
      >
      <el-col :span="4"
        ><div>
          试题类型:{{
            questionInfo.quest_type === 1
              ? "单选"
              : questionInfo.quest_type === 2
              ? "多选"
              : questionInfo.quest_type === 3
              ? "判断"
              : "简答"
          }}
        </div></el-col
      >
      <el-col :span="6"
        ><div>归属学科:{{ questionInfo.subject_name }}</div></el-col
      >
      <el-col :span="4"
        ><div>归属目录:{{ questionInfo.directory_name }}</div></el-col
      >
    </el-row>
    <br />
    <el-row :gutter="20">
      <el-col :span="10"
        ><div>
          标签信息:<span
            v-for="(item, index) in questionInfo.tag_info"
            :key="index"
            >{{ item }}
          </span>
        </div></el-col
      >
      <el-col :span="4"
        ><div>
          发布状态:<el-tag
            size="mini"
            :type="questionInfo.show_state === 1 ? 'success' : 'info'"
            >{{ questionInfo.show_state === 1 ? "上架" : "下架" }}</el-tag
          >
        </div></el-col
      >
      <el-col :span="6"><div>审核人:暂无</div></el-col>
      <el-col :span="4"
        ><div>
          审核状态:<el-tag
            size="mini"
            :type="questionInfo.check_state === 2 ? 'success' : 'info'"
            >{{
              questionInfo.check_state === 1
                ? "待审核"
                : questionInfo.check_state === 2
                ? "通过"
                : "未通过"
            }}</el-tag
          >
        </div></el-col
      >
    </el-row>
    <br />

    <el-row :gutter="20">
      <el-col :span="10"
        ><div>
          审核意见:
          {{ questionInfo.check_remarks ? questionInfo.check_remarks : "暂无" }}
        </div></el-col
      >
      <el-col :span="4"
        ><div>创建人:{{ questionInfo.create_name }}</div></el-col
      >
      <el-col :span="6"
        ><div>
          难度:{{
            questionInfo.difficulty === 1
              ? "简单"
              : questionInfo.difficulty === 2
              ? "中等"
              : "困难"
          }}
        </div></el-col
      >
      <el-col :span="4"
        ><div>发布时间:{{ questionInfo.created_at | formatDate }}</div></el-col
      >
    </el-row>
    <br />

    <el-divider content-position="center">试题信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>题干信息：</b>
        <el-link :underline="false" type="primary">
          <div v-html="questionInfo.question" />
        </el-link>
      </el-col>
      <el-col class="flex">
        <b>选项信息：</b>
        <!-- 单选/多选/判断 -->
        <div v-if="questionInfo.quest_type != 4">
          <el-checkbox
            v-for="(item, index) in toParse(questionInfo.quest_options)"
            :key="index"
            :checked="item.is_true"
          >
            {{ item.code }} {{ item.content }}
          </el-checkbox>
        </div>
        <!-- 简答 -->
        <div
          v-if="questionInfo.quest_type == 4"
          v-html="questionInfo.quest_answer"
        />
      </el-col>
    </el-row>
    <el-divider content-position="center">答案信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>正确答案：</b>
        <el-link :underline="false" type="primary">
          <div v-html="questionInfo.quest_answer" />
        </el-link>
      </el-col>
    </el-row>
    <el-row class="question-row">
      <el-col class="flex">
        <b>答案解析：</b>
        <div v-html="questionInfo.quest_remark" />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: "QuestionShow",
  data() {
    return {
      dialogShow: false,
      questionInfo: {},
    };
  },
  methods: {
    toParse(val) {
      if (!val) return [];
      return JSON.parse(val);
    },
  },
};
</script>

<style scoped lang="scss">
.question-row {
  line-height: 30px;
}
.question-row b {
  font-weight: normal;
  margin-right: 5px;
}
.question-row .flex {
  display: flex;
}
.question-row .flex b {
  width: 72px;
}
.dialog {
  .el-dialog__body {
    padding-top: 5px;
  }
}
</style>
